<div class='subtron text-left'>
  <div class='container'>
    {{#if report}}
      <a href="{{site.baseurl}}/userland/{{report.slug}}">
        <h1>{{report.title}}</h1>
      </a>
      <h4 class="docs-breadcrumbs">
        <a href="{{site.baseurl}}/userland/{{report.slug}}">{{report.description}}</a>
      </h4>
    {{else}}
     <a href="{{site.baseurl}}/userland">
       <h1>Electron Userland</h1>
     </a>
     <p class="lead mb-3">
       The people, apps, and packages of Electron's open-source ecosystem.
     </p>
    {{/if}}
  </div>
</div>

<script src="{{site.baseurl}}/js/vendor/list.min.js"></script>
<script src="{{site.baseurl}}/js/vendor/query-string.js"></script>
<script src="{{site.baseurl}}/js/vendor/set-query-string.js"></script>
<script src="{{site.baseurl}}/js/vendor/browser-date-formatter.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', browserDateFormatter)
  document.addEventListener('DOMContentLoaded', createFilterList)

  function createFilterList() {
    // look for a filterable list on this page
    var list = document.querySelector('.filterable-list')
    if (!list || !list.parentElement) return

    // inherit initial query from `?q` in query string
    window.filterInput = document.querySelector('.filterable-list-input')
    filterInput.value = queryString.parse(location.search).q || ''

    var opts = {
      listClass: 'filterable-list',
      searchClass: 'filterable-list-input',
      valueNames: [
        'item-name',
        'item-description',
        'item-keywords',
        'item-repository'
      ]
    }
    window.filterList = new List(list.parentElement, opts)

    // trigger a search, in case there is an existing value in the text input
    filterList.search(filterInput.value)

    // update the query param every time a search is performed
    filterList.on('updated', function() {
      setQueryString({
        q: filterInput.value
      })
    })
  }
</script>